<style>
    .statistics .echartCount {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px 0;
    }

    .statistics .row {
        margin: 0;
    }
</style>
<div class="statistics container-fluid">
    <div id="reqCount" class="echartCount" style="width:100%;height:250px;"></div>
    <div class="row">
        <div id="reqCountPercent" class=" col-lg-6 col-md-6 col-sm-6 col-xs-12 echartCount" style="height:300px;"></div>
        <div id="staticCount" class="col-lg-6 col-md-6 col-sm-6 col-xs-12 echartCount" style="height:300px;"></div>
    </div>
</div>
<script type="text/javascript" src="/static/plugins/echart-4.1.0.rc2/echarts.common.min.js"></script>
<script type="text/javascript">
    var ReqPercent_fields = {
        navBar: "导航条",
        notice: "公告",
        praise: "赞",
        statistics: "统计",
        verification: "验证",
        article: "文章",
        comment: "评论",
        friendLink: "友链",
        messageBoard: "留言板",
        aboutMe: "关于我",
        login: "登录",
    }
    var statis_fields = {
        artCount: "文章",
        commCount: "评论",
        praiseCount: "赞",
        demoCount: "演示资源",
        downloadCount: "下载资源",
        mainPage: "主页面",
        subPage: "子页面",
        navbarCount: "标签"
    }
    $(function () {
        statisReqPercent();
        statistics();
        statisReqOfDay();
    })

    function statisReqPercent() {
        $.ajax({
            url: "/statistics/back/getReqPercent.zb",
            type: "POST",
            dataType: "JSON"
        }).done(function (res) {
            var series_data = [];
            var legend_data = [];
            if (res && res.success) {
                var d = res.data;
                delete d.all;
                for (var key in d) {
                    var json = {name: ReqPercent_fields[key], value: res.data[key]}
                    series_data.push(json);
                    legend_data.push(ReqPercent_fields[key]);
                }
                var reqCountPercentChart = echarts.init($("#reqCountPercent").get(0));
                var reqCountPercentOption = {
                    title: {
                        text: '请求占比饼状统计图',
                        subtext: '各个区块请求占总请求的百分比',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: legend_data
                    },
                    series: [
                        {
                            name: '请求类型',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: series_data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                reqCountPercentChart.setOption(reqCountPercentOption);
            }
        }).always(function () {
            $(".content_loading").hide();
        });
    }

    function statistics() {
        $.ajax({
            url: "/statistics.zb",
            dataType: "JSON",
            type: "POST"
        }).done(function (res) {
            if (res && res.success) {
                var d = res.data;
                var xAxis_data = [];
                var series_data = [];
                delete d.reqCount;
                for (var key in d) {
                    xAxis_data.push(statis_fields[key]);
                    series_data.push(d[key]);
                }
                var staticCountChart = echarts.init($("#staticCount").get(0));
                var staticCountOption = {
                    title: {
                        text: '区块条形统计图',
                        subtext: '各个区块数据条数统计',
                        left: 'center'
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top: '18%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xAxis_data,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '总数量',
                            type: 'bar',
                            barWidth: '60%',
                            data: series_data
                        }
                    ]
                };
                staticCountChart.setOption(staticCountOption);
            }
        })
    }

    function statisReqOfDay() {
        $.ajax({
            url: "/statistics/back/getReqOfDay.zb",
            type: "POST",
            dataType: "JSON"
        }).done(function (res) {
            if (res && res.success) {
                var data = res.data;
                var totalReq = data[0] + data[data.length - 1];
                var newArr = [].concat(data);
                newArr.shift();
                var reqCountChart = echarts.init($("#reqCount").get(0));
                var reqCountOption = {
                    title: {
                        text: '近7天请求量统计折线图',
                        subtext: '总请求量' + totalReq,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '1%',
                        right: '3%',
                        bottom: '3%',
                        top: '22%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: getDayOfWeek()
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '请求量',
                            type: 'line',
                            stack: '总量',
                            data: newArr
                        }
                    ]
                };
                reqCountChart.setOption(reqCountOption);
            }
        })
    }

    function getDayOfWeek() {
        var arr = [];
        for (var i = 6; i >= 0; i--) {
            var date = new Date();
            var day = date.getDate();
            date.setDate(day - i);
            arr.push(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate())
        }
        return arr;
    }

</script>

